{% extends "album/base.html" %}

{% block title %}
    短剧
{% endblock %}

{% block page_title %}
    短剧 - 编辑
{% endblock %}

{% block body %}
    <div class="form-container">
        <form id="createForm" class="edit-form" method="post"
              action="{{ url_for('album_info.edit',id=form.album_info_id.data) }}">
            {{ form.csrf_token }}
            {{ form.album_info_id() }}
            <div class="form-section">
                <h3 class="section-title">基本信息</h3>
                <div class="form-grid">
                    <div class="form-group">
                        {{ form.title.label(class="form-label") }} <span class="required">*</span>
                        {{ form.title(class="form-input") }}
                        <div class="form-error">
                            {% for error in form.title.errors %}{{ error }}{% endfor %}</div>
                    </div>
                    <div class="form-group">
                        {{ form.seq_num.label(class="form-label") }}<span class="required">*</span>
                        {{ form.seq_num(class="form-input") }}
                        <div class="form-error">
                            {% for error in form.seq_num.errors %}{{ error }}{% endfor %}</div>
                    </div>
                    <div class="form-group">
                        {{ form.release_year.label(class="form-label") }}<span class="required">*</span>
                        {{ form.release_year(class="form-input") }}
                        <div class="form-error">
                            {% for error in form.release_year.errors %}{{ error }}{% endfor %}</div>
                    </div>
                    <div class="form-group">
                        {{ form.album_status.label(class="form-label") }}<span class="required">*</span>
                        {{ form.album_status(class="form-input") }}
                        <div class="form-error">
                            {% for error in form.album_status.errors %}{{ error }}{% endfor %}</div>
                    </div>
                    <div class="form-group">
                        {{ form.covers.label(class="form-label") }}<span class="required">*</span>
                        {{ form.covers() }}
                        <div class="flex gap-2">
                            <div>
                                <button type="button" id="addCoverBtn"
                                        class="py-2 text-black rounded-lg hover:bg-green-100 border border-gray-500"
                                        style="width: 100px" onclick="showAddModal('covers')">
                                    <i class="fas fa-plus"></i> 添加
                                </button>
                            </div>
                            <div id="CoversContainer" class="flex flex-wrap gap-2 p-1">

                            </div>
                        </div>
                        <div class="form-error">
                            {% for error in form.covers.errors %}{{ error }}{% endfor %}</div>
                    </div>
                    <div class="form-group">
                        {{ form.recommendation.label(class="form-label") }}
                        {{ form.recommendation(class="form-input") }}
                        <div class="form-error">
                            {% for error in form.recommendation.errors %}{{ error }}{% endfor %}</div>
                    </div>
                    <div class="form-group">
                        {{ form.introduction.label(class="form-label") }}
                        {{ form.introduction(class="form-input") }}
                        <div class="form-error">
                            {% for error in form.introduction.errors %}{{ error }}{% endfor %}</div>
                    </div>
                    <div class="form-group">
                        {{ form.tags.label(class="form-label") }}<span class="required">*</span>
                        {{ form.tags() }}
                        <!-- 标签输入区域 -->
                        <div class="flex gap-2">
                            <select class="form-input" id="dy_tags" name="dy_tags">
                                <option value="">请选择</option>
                                {% for tag in dy_tags %}
                                    <option value="{{ tag.id }}">{{ tag.tag_name }}</option>
                                {% endfor %}
                            </select>
                            <button type="button" id="addTagBtn" onclick="addTag()"
                                    class="py-2 text-black rounded-lg hover:bg-green-100 border border-gray-500"
                                    style="width: 100px">
                                <i class="fas fa-plus"></i> 添加
                            </button>
                        </div>
                        <!-- 标签显示区域 -->
                        <div id="tagsContainer" class="flex flex-wrap gap-2 pt-3 bg-gray-50 rounded-lg">
                        </div>
                        <div class="form-error">
                            {% for error in form.tags.errors %}{{ error }}{% endfor %}</div>
                    </div>
                    <div class="form-group">
                        {{ form.qualification.label(class="form-label") }}
                        {{ form.qualification(class="form-input") }}
                        <div class="form-error">
                            {% for error in form.qualification.errors %}{{ error }}{% endfor %}</div>
                    </div>
                </div>
            </div>
            <div class="form-section hidden" id="form_record">
                <h3 class="section-title">资质信息</h3>
                <div class="form-grid">
                    <div class="form-group">
                        {{ form.license_num.label(class="form-label") }}
                        {{ form.license_num(class="form-input") }}
                        <div class="form-error">
                            {% for error in form.license_num.errors %}{{ error }}{% endfor %}</div>
                    </div>
                    <div class="form-group">
                        {{ form.registration_num.label(class="form-label") }}
                        {{ form.registration_num(class="form-input") }}
                        <div class="form-error">
                            {% for error in form.registration_num.errors %}{{ error }}{% endfor %}</div>
                    </div>
                    <div class="form-group">
                        {{ form.ordinary_record_num.label(class="form-label") }}
                        {{ form.ordinary_record_num(class="form-input") }}
                        <div class="form-error">
                            {% for error in form.ordinary_record_num.errors %}{{ error }}{% endfor %}</div>
                    </div>
                    <div class="form-group">
                        {{ form.key_record_num.label(class="form-label") }}
                        {{ form.key_record_num(class="form-input") }}
                        <div class="form-error">
                            {% for error in form.key_record_num.errors %}{{ error }}{% endfor %}</div>
                    </div>
                </div>
            </div>
            <div class="form-section">
                <h3 class="section-title">备案材料</h3>
                <div class="form-grid">
                    <div class="form-group">
                        {{ form.name.label(class="form-label") }}<span class="required">*</span>
                        {{ form.name(class="form-input") }}
                        <div class="form-error">
                            {% for error in form.name.errors %}{{ error }}{% endfor %}</div>
                    </div>
                    <div class="form-group">
                        {{ form.duration.label(class="form-label") }}<span class="required">*</span>
                        {{ form.duration(class="form-input") }}
                        <div class="form-error">
                            {% for error in form.duration.errors %}{{ error }}{% endfor %}</div>
                    </div>
                    <div class="form-group">
                        {{ form.seqs_count.label(class="form-label") }}<span class="required">*</span>
                        {{ form.seqs_count(class="form-input") }}
                        <div class="form-error">
                            {% for error in form.seqs_count.errors %}{{ error }}{% endfor %}</div>
                    </div>
                    <div class="form-group">
                        {{ form.production_organisation.label(class="form-label") }}<span class="required">*</span>
                        {{ form.production_organisation(class="form-input") }}
                        <div class="form-error">
                            {% for error in form.production_organisation.errors %}{{ error }}{% endfor %}</div>
                    </div>
                    <div class="form-group">
                        {{ form.director.label(class="form-label") }}<span class="required">*</span>
                        {{ form.director(class="form-input") }}
                        <div class="form-error">
                            {% for error in form.director.errors %}{{ error }}{% endfor %}</div>
                    </div>
                    <div class="form-group">
                        {{ form.producer.label(class="form-label") }}<span class="required">*</span>
                        {{ form.producer(class="form-input") }}
                        <div class="form-error">
                            {% for error in form.producer.errors %}{{ error }}{% endfor %}</div>
                    </div>
                    <div class="form-group">
                        {{ form.actor.label(class="form-label") }}<span class="required">*</span>
                        {{ form.actor(class="form-input") }}
                        <div class="form-error">
                            {% for error in form.actor.errors %}{{ error }}{% endfor %}</div>
                    </div>
                    <div class="form-group">
                        {{ form.summary.label(class="form-label") }}<span class="required">*</span>
                        {{ form.summary(class="form-input") }}
                        <div class="form-error">
                            {% for error in form.summary.errors %}{{ error }}{% endfor %}</div>
                    </div>
                    <div class="form-group">
                        {{ form.cost_distribution_uri.label(class="form-label") }}<span class="required">*</span>
                        {{ form.cost_distribution_uri() }}
                        <div class="flex gap-2">
                            <div>
                                <button type="button"
                                        class="py-2 text-black rounded-lg hover:bg-green-100 border border-gray-500"
                                        style="width: 100px" onclick="showAddModal('cost_distribution_uri')">
                                    <i class="fas fa-plus"></i> 添加
                                </button>
                            </div>
                            <div id="CostDistributionContainer" class="flex flex-wrap gap-2 p-1">

                            </div>
                        </div>
                        <div class="form-error">
                            {% for error in form.cost_distribution_uri.errors %}{{ error }}{% endfor %}</div>
                    </div>
                    <div class="form-group">
                        {{ form.assurance_uri.label(class="form-label") }}
                        {{ form.assurance_uri() }}
                        <div class="flex gap-2">
                            <div>
                                <button type="button"
                                        class="py-2 text-black rounded-lg hover:bg-green-100 border border-gray-500"
                                        style="width: 100px" onclick="showAddModal('assurance_uri')">
                                    <i class="fas fa-plus"></i> 添加
                                </button>
                            </div>
                            <div id="AssuranceContainer" class="flex flex-wrap gap-2 p-1">

                            </div>
                        </div>
                        <div class="form-error">
                            {% for error in form.assurance_uri.errors %}{{ error }}{% endfor %}</div>
                    </div>
                    <div class="form-group">
                        {{ form.playlet_production_cost.label(class="form-label") }}<span class="required">*</span>
                        {{ form.playlet_production_cost(class="form-input") }}
                        <div class="form-error">
                            {% for error in form.playlet_production_cost.errors %}{{ error }}{% endfor %}</div>
                    </div>
                    <div class="form-group">
                        {{ form.screen_writer.label(class="form-label") }}
                        {{ form.screen_writer(class="form-input") }}
                        <div class="form-error">
                            {% for error in form.screen_writer.errors %}{{ error }}{% endfor %}</div>
                    </div>
                </div>
            </div>
            <div class="form-section">
                <h3 class="section-title">广电备案信息</h3>
                <div class="form-grid">
                    <div class="form-group">
                        {{ form.record_type.label(class="form-label") }}<span class="required">*</span>
                        {{ form.record_type(class="form-input") }}
                        <div class="form-error">
                            {% for error in form.record_type.errors %}{{ error }}{% endfor %}</div>
                    </div>
                    <div class="form-group">
                        {{ form.broadcast_record_number.label(class="form-label") }}<span class="required">*</span>
                        {{ form.broadcast_record_number(class="form-input") }}
                        <div class="form-error">
                            {% for error in form.broadcast_record_number.errors %}{{ error }}{% endfor %}</div>
                    </div>
                </div>
            </div>
            <div class="form-section">
                <div class="form-actions">
                    <button type="submit" form="createForm" class="btn btn-primary">
                        <i class="fa fa-paper-plane"></i> 提交
                    </button>
                    <button type="button" id="cancelBtn" class="btn btn-cancel"
                            onclick="window.location.href='{{ url_for('album_info.index',id=form.album_info_id.data) }}'">
                        <i class="fa fa-reply"></i> 返回
                    </button>

                </div>
            </div>
        </form>


    </div>
    <!-- 添加封面悬浮层 -->
    <div id="addImageModal" class="fixed inset-0 bg-black bg-opacity-50 hidden items-center justify-center z-50">
        <div class="bg-white rounded-lg p-6 max-w-4xl w-full max-h-[90vh] fade-in">
            <div class="flex justify-between items-center mb-6">
                <h3 class="text-lg font-semibold">选择图片</h3>
                <button onclick="hideAddModal()" class="text-gray-500 pb-2 hover:text-gray-700">
                    <i class="fas fa-times text-xl"></i>
                </button>
            </div>

            <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
                <!-- 条件筛选区域 -->
                <div class="search-container gap-2">
                    <label>关键词</label>
                    <div class="filter-input">
                        <input type="text" class="search-input" id="search_image_key"/>
                    </div>
                    <button class="search-button" type="button" id="btnSearchImage" onclick="searchImage()">
                        <i class="fa fa-search"></i>查询
                    </button>
                </div>

                <!-- 图片列表区域 -->
                <div class="lg:col-span-2">
                    <div class="grid-container gap-2 text-center border " id="imageGrid">

                    </div>
                </div>

                <div class="button-container gap-2">
                    <button type="button" class="btn btn-primary" onclick="addImage()">
                        <i class="fa fa-paper-plane"></i> 确定
                    </button>
                    <button type="button" class="btn btn-cancel" onclick="hideAddModal()">
                        <i class="fas fa-times"></i> 取消
                    </button>

                </div>
            </div>
        </div>
    </div>
    <script src="{{ url_for('static', filename='js/album.js') }}"></script>
    <script>
        initContainer();
        changeQualification();
    </script>
{% endblock %}